<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各种不同类型的盒子</title>
    <style>
    div {
        height: 100px;
        width: 100px;
        background-color:red;
        display: inline-block;
    }
    span {
        height: 150px;
        width: 150px;
        background-color: #0f0;
        display: inline-block;
    }
    a {
        height: 20px;
        width: 80px;
        color: #000;
        text-align: center;
        background-color: #00f;
        display: inline-block;
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div>div盒子</div>
    <div>div盒子</div>
    <div>div盒子</div>
    <span>span盒子</span>
    <span>span盒子</span>
    <span>span盒子</span>
    <a href="#">a盒子</a>
    <a href="#">a盒子</a>
    <a href="#">a盒子</a>
</body>
</html>